<template>
  <div>
    <!-- 目标:
    1.翻转数组,观察v-for是否更新
    2.截取数组
    3.更新数组中的值 -->

    <!-- 数组方法改变数组,就会导致v-for更新 -->
    <!-- 数组方法不改变数组,而是返回新数组,就不会导致v-for更新,可采用覆盖数组或this.$set() -->

    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="btnClick">翻转</button>
    <button @click="jqbtn">截取</button>
    <button @click="updatebtn">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小马", "二弟", "三哥"],
    };
  },
  methods: {
    btnClick() {
      // 数组方法会改变原始数据的情况,会导致v-for更新
      this.arr.reverse();
    },
    jqbtn() {
      // 数组方法不会改变原始数据的情况,不会导致v-for更新
      // 不会改变原始数据的方法,可以通过对vue的变量重新赋值,来触发更新
      this.arr.slice(0, 2);
    },
    updatebtn() {
      // 更新第一个元素
      // 直接修改引用类型的元素,并不会触发v-for的更新
      // 解决办法:
      // vue提供了一个更新方法:$set()
      this.$set(this.arr, 0, "大哥");
    },
  },
};
</script>

<style>
</style>